import React, { useState, useEffect } from 'react';
import {Button, message, Modal, Table} from 'antd';
import {listInterfaceInfoByPageUsingPost} from "@/services/zhudiApi-backend/interfaceController";
import {PageContainer} from "@ant-design/pro-components";
import {ExclamationCircleOutlined} from "@ant-design/icons";
const { confirm } = Modal; // 获取confirm方法
import { history } from 'umi';

type InterfaceVO = {
  createTime?: string;
  creatorId?: number;
  description?: string;
  groupName?: string;
  id?: number;
  method?: string;
  name?: string;
  parameter?: string;
  requestHeader?: string;
  responseHeader?: string;
  status?: number;
  updateTime?: string;
  url?: string;
};

interface ColumnType extends Partial<InterfaceVO> {
  title?: string;
  dataIndex?: string;
  key?: string;
  render?: (text: number, record: InterfaceVO) => JSX.Element;
}

// 添加弹出确认对话框方法
function showDeleteConfirm() {
  confirm({
    title: '是否要删除?',
    icon: <ExclamationCircleOutlined />,
    content: '确认后，数据将被永久删除，无法恢复，请谨慎操作！',
    okText: '确认',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      console.log('OK');
      // 这里调用删除的方法
    },
    onCancel() {
      console.log('取消');
    },
  });
}
function showAddConfirm() {
  confirm({

    onOk() {
      console.log('OK');
      // 这里调用删除的方法
    },
    onCancel() {
      console.log('取消');
    },
  });
}


// @ts-ignore
const columns: ColumnType[] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Method', dataIndex: 'method', key: 'method' },
  { title: 'Parameter', dataIndex: 'parameter', key: 'parameter' },
  {
    title: 'Status',
    dataIndex: 'status',
    key: 'status',
    render: (status) => <p>{status === 1 ? '开启' : '关闭'}</p>
  },
  {
    title: 'Action',
    dataIndex: '',
    key: 'x',
    render: (record) => (
      <>
        <a href={`/interface_info/${record.id}`}>修改</a>
        <span style={{ margin: '0 8px' }}> | </span>
        <a onClick={showDeleteConfirm}>删除</a>
      </>
    ),
  },
];

const App: React.FC = () => {

  const [list, setList] = useState<API.InterfaceVO[]>([]);
  const [total, setTotal] = useState<number>(0);

  const loadData = async (pageNum = 1, pageSize = 5) => {
    try {
      const res = await listInterfaceInfoByPageUsingPost({
        pageNum,
        pageSize,
      });
      setList(res?.data?.records ?? []);
      setTotal(res.data?.total ?? 0);

    } catch (error: any) {
      message.error('请求失败，' + error.message);
    }
  };

  useEffect(() => {
    loadData();
  }, []);

  return (
    <PageContainer
      title="在线接口开放平台"
      extra={[
        <Button key="addInterfaceButton" type="primary" onClick={() => showAddConfirm()}>
          增加接口
        </Button>,
      ]}
    >

      <Table
        columns={columns}
        dataSource={list}
        pagination={{
          // eslint-disable-next-line @typescript-eslint/no-shadow
          showTotal(total: number) {
            return '总数：' + total;
          },
          pageSize: 5,
          total,
          onChange(page, pageSize) {
            loadData(page, pageSize);
          },
        }}
      />
    </PageContainer>
  );
};

export default App;
